Multi-Paradigm Modelling and Synthesis of User Interfaces

In this article, model-based design and synthesis of reactive user interfaces is presented as a particular application of Computer-Automated Multi-Paradigm Modelling (CAMPaM). Multi-paradigm modelling acknowledges the need to model at different levels of abstraction, using appropriate formalisms. It also gives transformations first-class model status. In the CAMPaM UI development process, a class of user interfaces is modelled. This includes models of the abstract syntax of the user interface, of the concrete visual syntax of the user interface (including layout) and of the semantics of the application (its reactive behaviour). From these models, an interactive modelling environment is synthesized. This environment allows the modeller to experiment (analyze, simulate) with different instances in the modelled class of user interfaces. Once a single element of the set of possible user interfaces is chosen, the final UI application is synthesized. This process will be demonstrated by means of a digital watch application. Code is synthesized for execution within a web browser using an AJAX client-server architecture.